<template>
  <div class="app-container">
    <SearchCard @onSearch="onSearch" @onReset="onReset">
      <el-form :model="UserForm" label-width="auto" :inline="true" @keyup.enter="onSearch">
        <el-form-item label="账号">
          <pb-input v-model="UserForm.loginName" placeholder="请输入账号" />
        </el-form-item>
        <el-form-item label="姓名">
          <pb-input v-model="UserForm.userName" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="所属食堂">
          <pb-select v-model="UserForm.tenantId" placeholder="请选择食堂" keys="tenantId" label="tenantName"
            :options="kitchenList" @change="onSearch" />
        </el-form-item>
        <el-form-item label="联系电话">
          <pb-input v-model="UserForm.phoneNumber" placeholder="请输入联系电话" size="small" />
        </el-form-item>
      </el-form>
    </SearchCard>
    <pb-card padding="0px " class="flex-1">
      <div v-hasPerm="'center:kitchen:user:add'">
        <ContentOperation>
          <pb-button size="small" plain @click="addFn">+添加</pb-button>
        </ContentOperation>
      </div>

      <pb-card>
        <pb-table :tableData="tableData" :column="column" :bottomElement="['pb-page']">
          <template #operation="{ row }">
            <div class="flex" v-if="row.userType != 'ADMIN'">
              <div v-hasPerm="'center:kitchen:user:edit'">
                <pb-button text @click="editFn(row)" size="small">编辑</pb-button>
                <p class="divider mr-2 ml-2"></p>
              </div>
              <div v-hasPerm="'center:kitchen:user:reset'">
                <PopconfirmButton text="重置密码" @confirm="resetstatusFn(row, 'reset')">
                </PopconfirmButton>
                <p class="divider mr-2 ml-2"></p>
              </div>
              <div v-hasPerm="'center:kitchen:user:switch'">
                <PopconfirmButton v-if="row.status == 'using'" text="禁用"
                  @confirm="resetstatusFn(row, 'status', 'forbid')">
                </PopconfirmButton>
                <PopconfirmButton v-if="row.status == 'forbid'" text="启用"
                  @confirm="resetstatusFn(row, 'status', 'using')">
                </PopconfirmButton>
              </div>

            </div>
          </template>
        </pb-table>
        <pb-pagination v-model:currentPage="pages.currentPage" v-model:pageSize="pages.pageSize"
          @onChange="getKitchenUserListApi" :total="pages.total"></pb-pagination>
      </pb-card>
    </pb-card>

    <addModifPop ref="popRef" :kitchenList="kitchenList" @refresh="onSearch"></addModifPop>
  </div>
</template>

<script lang="ts" setup>
  import { getKitchenUserList, resetPassword, getUserStatus } from '@/api/organizeFramework'
  import { GetkitchenListApi } from '@/api/Purchasing'
  import { createMessage } from "@/Public-UIlibrary/pb-message/method";
  import addModifPop from './components/addModifPop.vue';
  const tableData = ref([])
  const column = [{

    key: 'loginName',
    name: '账号',
    width: 100,
  },
  {
    key: 'userName',
    name: '姓名',
    width: 100,
  },
  {
    key: 'departmentName',
    name: '单位',
    width: 100,
  },
  {
    key: 'tenantName',
    name: '所属食堂',
    width: 100,
  },
  {
    key: 'postName',
    name: '职务',
    width: 100,
  },
  {
    key: 'roleNames',
    name: '角色',
    width: 150,
  },
  {
    key: 'phoneNumber',
    name: '联系电话',
    width: 160,
  },
  {
    key: 'createTime',
    name: '创建时间',
    width: 150,
  },
  {
    slot: 'operation',
    fixed: 'right',
    name: '操作',
    width: 180,
  }]
  const resetstatusFn = (row: any, el: string, Rstatus = '') => {
    if (el == 'reset') {
      resetPassword({
        "userId": row.userId
      }).then(res => {
        if (res.code == 2000) {
          createMessage({
            message: '重置密码成功',
            type: 'success'
          })
          getKitchenUserListApi()
        }
      })
    } else if (el == 'status') {
      getUserStatus({
        "userId": row.userId,
        "status": Rstatus
      }).then(res => {
        if (res.code == 2000) {
          createMessage({
            message: '操作成功',
            type: 'success'
          })
          getKitchenUserListApi()
        }
      })
    }
  }


  const UserForm = reactive({
    userName: '',
    loginName: '',
    phoneNumber: '',
    tenantId: ''
  }) as any


  const pageInit = () => ({
    currentPage: 1,
    pageSize: 10,
    total: 0
  })

  let pages = reactive(pageInit())

  const popRef = ref(null)

  const addFn = () => {
    popRef.value.showFn()
  }

  const editFn = (row) => {
    popRef.value.showFn(JSON.parse(JSON.stringify(row)))
  }



  const onSearch = () => {
    pages.currentPage = 1
    getKitchenUserListApi()
  }
  const clearObjKey = (clearForm: any) => {
    Object.keys(clearForm).forEach((key: any) => {
      clearForm[key] = '';
    });
  }
  const onReset = () => {
    clearObjKey(UserForm)
    pages = pageInit()
    getKitchenUserListApi()
  }

  // 获取用户列表
  const getKitchenUserListApi = () => {
    return new Promise < void> ((resolve, reject) => {
      let { currentPage, pageSize } = { ...pages };
      let params = {
        currentPage,
        pageSize,
        ...UserForm,
      };
      getKitchenUserList(params).then(res => {
        if (res.code == 2000) {
          tableData.value = res.data.records
          pages.total = res.data.total
        }
      })
    })
  }

  const kitchenList = ref([])
  const GetkitchenList = () => {
    return new Promise < void> ((resolve, reject) => {
      GetkitchenListApi().then(res => {
        if (res.code == 2000) {
          kitchenList.value = res.data
        }
      })
    })
  }

  onMounted(() => {
    GetkitchenList()
    getKitchenUserListApi()
  })
</script>

<style lang="scss" scoped></style>